<template>
	<el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" :router="true">
		<el-menu-item v-for="item in menus" :key="item.title" :index="item.to" @click="handSelect(item.title)">
			<el-icon><component :is="item.icon" /></el-icon>
			<template #title>{{ item.title }}</template>
		</el-menu-item>
		<el-button class="el-button-auto" v-if="isCollapse" :icon="Expand" circle @click="handleOpen" />
		<el-button class="el-button-auto" v-if="!isCollapse" :icon="Fold" circle @click="handleClose" />
	</el-menu>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from "vue"
import { Histogram, Menu as IconMenu, HelpFilled, Setting, Expand, Fold } from "@element-plus/icons-vue"

const menus = [
	{ title: "主页", to: "/", icon: IconMenu },
	{ title: "订单列表", to: "/order-list", icon: Histogram },
	{ title: "用户管理", to: "/user-admin", icon: HelpFilled },
	{ title: "系统管理", to: "/system-admin", icon: Setting },
]

/**
 * 子传父
 * 1. 使用 defineEmits 传入接收父组件事件的名称， 得到emit函数
 * 2. 子组件在模版中定义触发点击的事件
 */
const emit = defineEmits(["proSelect"])

const handSelect = (title: string) => {
	emit("proSelect", title)
}

const isCollapse = ref(true)

const handleOpen = () => {
	isCollapse.value = false
}
const handleClose = () => {
	isCollapse.value = true
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: 200px;
	height: 100%;
}
.el-menu-vertical-demo {
	height: 100%;
	position: relative;
}
.el-button-auto {
	position: absolute;
	bottom: 20px;
	left: 16px;
	margin: 0;
	z-index: 1;
}
</style>
